<template>
    <div class="list" >
      <div class="item"
           v-for="(item,key) of cities"
           :key="key"
      @click="handleLetterClick">{{key}} </div>
    </div>
</template>

<script>
export default {
  name: 'CityAlphabet',
  props: {
    cities: Object
  },
  methods: {
    handleLetterClick (e) {
      this.$emit('change', e.target.innerText)
    }
  }
}
</script>

<style lang='stylus' scoped>
@import "~@/assets/styles/varibles.styl";
.list{
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  right:0;
  top: 1.58rem;
  bottom: 0;
  width: .4rem;
}
.item{
  line-height: .4rem;
  text-align: center;
  color: $bgColor;
}
</style>
